<template>
  <el-row class="container">
    <el-col :span="11"
            class="bg-white padding margin-right">
      <div class='flex justify-between align-center margin-bottom border-bottom padding-bottom-sm'>
        <h3>资源列表</h3>
        <div>
          <el-button type="primary"
                     @click="add"
                     size="small">新增</el-button>
          <el-button type="danger"
                     @click="remove"
                     size="small">删除</el-button>
        </div>
      </div>
      <el-tree :data="treeData"
               :props="defaultProps"
               @node-click="handleNodeClick"></el-tree>
    </el-col>
    <el-col :span="12"
            class="bg-white padding">

    </el-col>
  </el-row>
</template>

<script>

export default {
  data() {
    return {
      treeData: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: { // 方法集合
    handleNodeClick(data) {
      console.log(data)
    },
    add() {

    },
    remove() {

    }
  },
  created() { // 生命周期 - 创建完成（可以访问当前this实例）

  }

}
</script>
<style lang='scss' scoped >
.container {
  background: #f5f5f5;
  height:calc(100vh - 120px);
}
.border-bottom {
  border-bottom: 1px solid #ddd;
}
.bg-white {
  background-color: #fff;
}
</style>
